<template>
  <el-table :data="data" :show-header="false" stripe>
    <el-table-column prop="value">

    </el-table-column>
  </el-table>

  <el-pagination v-if="page" :current-page="page.pageNum" :layout="pageLayout" :page-size="page.pageSize"
                 :page-sizes="pageSizes"
                 :total="page.total" small @size-change="page.sizeChange"
                 @current-change="page.currentChange"/>
</template>

<script setup>
import {reactive} from "vue";

defineOptions({
  name: 'JeesdpList'
});

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  page: {
    type: Object,
  },
  pageSizes: {
    type: Array,
    default: [10, 20, 30, 40, 50, 100]
  },
  height: {
    type: Number
  },
  width: {
    type: String,
    default: "100%"
  },
  options: {
    type: Object
  },
  key: {
    type: String,
    default: 'name'
  },
  loading: {
    type: Boolean,
    default: false
  },
  selection: {
    type: Boolean,
    default: true
  },
  index: {
    type: Boolean,
    default: false
  },
  pageLayout: {
    type: String,
    default: 'jumper, prev, pager, next, sizes, total'
  }
});

const emits = defineEmits(['rowDblclick']);
let selectedRows = reactive([]);

const getSelectedRows = () => {
  return selectedRows;
}

defineExpose({getSelectedRows});

</script>

<style scoped>

.jeesdp-list-item {
  border: 1px solid #EBEEF5;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
}

.jeesdp-list-item:not(:last-child) {
  border-bottom: none;
}

</style>
